<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JackLin的博客</title>

    <!--    标签栏图标   -->
    <link rel="shortcut icon" href="/image/logo.png" type="image/x-icon">

    <link rel="stylesheet" th:href="@{/css/login/normalize.css}">
    <link rel="stylesheet" th:href="@{/css/login/demo.css}">
    <script th:src="@{/js/jquery-3.4.1.js}"></script>

    <style>
        /* Header */
        .large-header {
            position: relative;
            width: 100%;
            background: #333;
            overflow: hidden;
            background-size: cover;
            background-position: center center;
            z-index: 1;
        }

        .demo-1 .large-header {
            background-image: url('../image/demo-1-bg.jpg');
        }

        .logo_box {
            width: 400px;
            height: 500px;
            padding: 35px;
            color: #EEE;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -250px;
        }

        .logo_box h3 {
            text-align: center;
            height: 20px;
            font: 20px "microsoft yahei", Helvetica, Tahoma, Arial, "Microsoft jhengHei", sans-serif;
            color: #FFFFFF;
            height: 20px;
            line-height: 20px;
            padding: 0 0 35px 0;
        }

        .forms {
            width: 280px;
            height: 485px;
        }

        .logon_inof {
            width: 100%;
            min-height: 450px;
            padding-top: 35px;
            position: relative;
        }

        .input_outer {
            height: 46px;
            padding: 0 5px;
            margin-bottom: 30px;
            border-radius: 50px;
            position: relative;
            border: rgba(255, 255, 255, 0.2) 2px solid !important;
        }

        /*  验证码输入框 */
        .input_code {
            width: 45px;
        }

        /*  发送验证码按钮 */
        .get_code {
            width: 45px;
        }

        .u_user {
            width: 25px;
            height: 25px;
            background: url(../image/login_ico.png);
            background-position: -125px 0;
            position: absolute;
            margin: 10px 13px;
        }

        .us_uer {
            width: 25px;
            height: 25px;
            background-image: url(../image/login_ico.png);
            background-position: -125px -34px;
            position: absolute;
            margin: 10px 13px;
        }

        .l-login {
            position: absolute;
            z-index: 1;
            left: 50px;
            top: 0;
            height: 46px;
            font: 14px "microsoft yahei", Helvetica, Tahoma, Arial, "Microsoft jhengHei";
            line-height: 46px;
        }

        .text {
            width: 220px;
            height: 46px;
            outline: none;
            display: inline-block;
            font: 14px "microsoft yahei", Helvetica, Tahoma, Arial, "Microsoft jhengHei";
            margin-left: 50px;
            border: none;
            background: none;
            line-height: 46px;
        }

        /*///*/
        .mb2 {
            margin-bottom: 20px
        }

        .mb2 a {
            text-decoration: none;
            outline: none;
        }

        .submit {
            padding: 15px;
            margin-top: 20px;
            display: block;
            cursor: pointer;
        }

        .act-but {
            line-height: 20px;
            text-align: center;
            font-size: 20px;
            border-radius: 50px;
            background: #0096e6;
        }

        .form {
            autocomplete: off;
        }

        .tip-msg {
            position: absolute;
            display: block;
            left: 80px;
            color: red;
            font-weight: 800;
        }

        .tip-username {
            position: absolute;
            display: block;
            left: 350px;
            width: 180px;
            top: 10px;
            display: none;
        }

        .tip-password {
            position: absolute;
            display: block;
            left: 350px;
            width: 180px;
            top: 88px;
            display: none;
        }


    </style>

</head>
<body>
<div class="container demo-1">
    <div class="content">
        <div id="large-header" class="large-header">
            <canvas id="demo-canvas"></canvas>
            <div class="logo_box">
                <h3 class="animated rubberBand">博客后台管理</h3>
                <!--    error 不为空，就显示-->
                <p th:text="${error}" th:if="${not #strings.isEmpty(error)}" style="color: red; text-align: center"
                   class="animated rubberBand"></p>
                <form id="form" th:action="@{/admin/adminMain}" name="f" method="post">
                    <div class="input_outer">
                        <span class="u_user"></span>
                        <input id="inputname" name="username" class="text" required style="color: #FFFFFF !important"
                               type="text" placeholder="请输入账户">
                        <span class="tip-msg tip-username animated rubberBand">用户名不能为空</span>
                        <span class="tip-msg tip-password animated rubberBand">密码不能为空</span>
                    </div>
                    <div class="input_outer">
                        <span class="us_uer"></span>
                        <input id="inputpassword" name="userpassword" class="text" required
                               style="color: #FFFFFF !important; position:absolute; z-index:100;" value=""
                               type="password" placeholder="请输入密码">
                    </div>
                    <!--                    <div class="input_outer">-->
                    <!--                        <span class="us_uer"></span>-->
                    <!--                        <input id="inputcode" name="inputcode" class="text" required style="color: #FFFFFF !important; position:absolute; z-index:100;"value="" type="password" placeholder="请验证码">-->
                    <!--                    </div>-->
                    <!--                    <div class="mb2">-->
                    <!--                        <a class="act-but sendcode" style="color: #FFFFFF">发送验证码</a>-->
                    <!--                    </div>-->


                    <div class="mb2">
                        <a class="act-but submit" style="color: #FFFFFF">登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div><!-- /container -->

<script th:src="@{/js/login/TweenLite.min.js}"></script>
<script th:src="@{/js/login/EasePack.min.js}"></script>
<script th:src="@{/js/login/rAF.js}"></script>
<script th:src="@{/js/login/demo-1.js}"></script>
<div style="text-align:center;">

    <script>

        $('.submit').click(function () {
            $("#inputpassword").val()
            if ($("#inputname").val() === '') {
                $(".tip-username").show();
                return;
            } else {
                $(".tip-username").hide(200);
            }
            if ($("#inputpassword").val() === '') {
                $(".tip-password").show();
                return;
            } else {
                $(".tip-password").hide(200);
            }
            console.log('执行了登录')
            $("#form").submit();
        });

        $('.sendcode').click(function () {

            $.ajax("/user/code", {
                type: "GET",
                dataType: "text",  // 返回的类型为纯文本字符串类型
                traditional: true,
                success: function (data, status) {
                    // alter("data" + data);
                    console.log(data)
                    // $.alert("data" + data);
                }

            })

        })


    </script>

</div>
</body>
</html>